<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
import { ref, onMounted, computed, watch } from 'vue';
import Chart from 'chart.js/auto';
import { useBodyStatsStore } from '@/stores/bodyStats';
const chartRef = ref(null);
const statsChart = ref(null);
const bodyStatsStore = useBodyStatsStore();
const bodyStats = computed(() => bodyStatsStore.stats);
const chartType = ref('weight');
const hasStatsData = computed(() => bodyStats.value.length > 0);
const isLoading = ref(false);
import { useNutritionStore } from '@/stores/nutrition';
import { useSettingsStore } from '@/stores/settings';
import { useUserStore } from '@/stores/user';
const nutritionStore = useNutritionStore();
const settingsStore = useSettingsStore();

// 初始化数据
onMounted(() => {
  nutritionStore.loadMeals(new Date());
  settingsStore.loadSettings();
  bodyStatsStore.loadStats();
  if (hasStatsData.value) {
    renderChart();
  }
});

// 监听图表类型变化重新渲染
watch(chartType, () => {
  console.log('图表类型变化，当前类型：', chartType.value);
  if (hasStatsData.value) {
    console.log('开始渲染图表');
    renderChart();
  }
});

// 计算总营养摄入
const totalCalories = computed(() => {
  return Math.max(0, nutritionStore.meals.reduce((sum, meal) => sum + meal.calories, 0));
});

const totalProtein = computed(() => {
  return Math.max(0, nutritionStore.meals.reduce((sum, meal) => sum + meal.protein, 0));
});

const totalCarbs = computed(() => {
  return Math.max(0, nutritionStore.meals.reduce((sum, meal) => sum + meal.carbs, 0));
});

const totalFat = computed(() => {
  return Math.max(0, nutritionStore.meals.reduce((sum, meal) => sum + meal.fat, 0));
});

// 计算进度百分比
const caloriesPercentage = computed(() => Math.min(Math.round((totalCalories.value / (settingsStore.calorieGoal || 2000)) * 100), 100));
const proteinPercentage = computed(() => Math.min(Math.round((totalProtein.value / (settingsStore.proteinGoal || 100)) * 100), 100));
const carbsPercentage = computed(() => Math.min(Math.round((totalCarbs.value / (settingsStore.carbsGoal || 250)) * 100), 100));
const fatPercentage = computed(() => Math.min(Math.round((totalFat.value / (settingsStore.fatGoal || 70)) * 100), 100));

// 健身课程数据
const fitnessClasses = ref([
  { id: 1, title: '30分钟全程站立燃脂有氧运动', instructor: '周六野Zoey', duration: '30分钟', level: '低', image: 'Image/5.jpg', videoUrl: 'https://www.bilibili.com/video/BV1sA411Q7R3/?spm_id_from=333.337.search-card.all.click&vd_source=3e9e72fea89239fccb128ac039e94478', description: '30分钟全程站立燃脂有氧运动，无跳跃，无深蹲，膝友好。难度系数为"能笑着爆汗"（低）的运动！适合入门和大基数，也适合其他所有水平冬天不想趴在冰冷的地面，不想出门跑步，不想去健身房用有氧器械，那就做这个小空间居家无工具比其他器械有氧更有趣的运动吧！全程分5组很好坚持，来周六野一下吧！' },
  { id: 2, title: '帕梅拉 - 10分钟暴汗有氧｜内啡肽UP 欢乐高强有氧舞步 (PamelaReif Official)', instructor: '帕梅拉 (Pamela Reif)', duration: '10分钟', level: '高级', image: 'Image/19.avif', videoUrl: 'https://www.bilibili.com/video/BV1R3411A7g4/?spm_id_from=333.337.search-card.all.click&vd_source=3e9e72fea89239fccb128ac039e94478', description: '没动力了？打开训练视频开始暴汗有氧，让身体分泌内啡肽吧！内啡肽=“快乐激素”，让快乐能量赶走压力和坏情绪。训练结合HIIT与绕臀动作，背景音乐充满律动，让你不自觉跟着扭动。高强训练会让心跳飙升，运动后满满的内啡肽给自己蓄能，爱上这种感觉！' },
  { id: 3, title: '30分钟无器械全身燃脂！新手绝对不能错过的健身宝典！（Jordan_Yeoh)', instructor: 'Jordan Yeoh', duration: '30分钟', level: '初级', image: 'Image/13.jpg', videoUrl: 'https://www.bilibili.com/video/BV1UT4y1K7cJ/?spm_id_from=333.337.search-card.all.click&vd_source=3e9e72fea89239fccb128ac039e94478', description: '30分钟level1训练，锻炼初学者的肌肉和最大程度的燃脂训练。适合新手的无器械全身燃脂课程，马来西亚教练Jordan Yeoh带你找到适合自己的健身方式，加油！' },
]);

const userStore = useUserStore();

const userInfo = ref(userStore.getUserInfo() || {});
const fitnessGoals = ref(settingsStore.getFitnessGoals() || {});
const fitnessGoalText = computed(() => {
  const goalMap = {
    'lose_weight': '减脂',
    'gain_muscle': '增肌',
    'maintain': '维持体型',
    'improve_fitness': '提高体能'
  };
  return goalMap[fitnessGoals.value.type] || '未设置目标';
});

const renderChart = () => {
    try {
      if (statsChart.value) {
        statsChart.value.destroy();
      }

      if (!chartRef.value || !hasStatsData.value) return;
      const ctx = chartRef.value.getContext('2d');
      const labels = bodyStats.value.map(stats => formatChartDate(stats.date));
      let data, label, borderColor, backgroundColor;
      console.log('开始准备图表数据，当前图表类型:', chartType.value);
      console.log('bodyStats数据:', bodyStats.value);
      if (!bodyStats.value.every(stats => stats)) {
        console.error('bodyStats包含无效数据');
        return;
      }

      switch(chartType.value) {
        case 'weight':
          data = bodyStats.value.map(stats => stats.weight);
          label = '体重 (kg)';
          borderColor = '#00cec9';
          backgroundColor = 'rgba(0, 206, 201, 0.1)';
          break;
        case 'muscle':
          data = bodyStats.value.map(stats => stats.muscle || 0);
          label = '肌肉量 (kg)';
          borderColor = '#74b9ff';
          backgroundColor = 'rgba(116, 185, 255, 0.1)';
          break;
        case 'fat':
          data = bodyStats.value.map(stats => stats.fat || 0);
          label = '体脂率 (%)';
          borderColor = '#ff7675';
          backgroundColor = 'rgba(255, 118, 117, 0.1)';
          break;
      }

      console.log('准备生成的图表数据:', data);
      // 确保 data 是数组，若不是则设为空数组
      const safeData = Array.isArray(data) ? data.map(item => item !== undefined && item !== null ? item : 0) : [];
      if (safeData.length === 0 || safeData.some(item => isNaN(item))) {
        console.error('图表数据包含无效值或为空');
        return;
      }

      // 验证数据集对象是否有效
      const chartData = {
          labels: labels,
          datasets: [{
              label: label,
              data: safeData,
              borderColor: borderColor,
              backgroundColor: backgroundColor,
              tension: 0.3,
              fill: true,
              pointBackgroundColor: borderColor,
              pointRadius: 4,
              pointHoverRadius: 6
          }]
      };

      // 增强数据集验证
      if (!chartData || !chartData.datasets || chartData.datasets.some(dataset => {
          return dataset === undefined || dataset.data === undefined || dataset.data.some(item => item === undefined);
      })) {
          console.error('数据集对象包含未定义的关键属性');
          return;
      }

      statsChart.value = new Chart(ctx, {
        type: 'line',
        data: chartData,
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: false,
              grid: { color: 'rgba(255, 255, 255, 0.1)' },
              ticks: { color: '#ffffff' }
            },
            x: {
              grid: { color: 'rgba(255, 255, 255, 0.1)' },
              ticks: { color: '#ffffff' }
            }
          },
          plugins: {
            legend: { labels: { color: '#ffffff' } }
          }
        }
      });
      console.log('传入 Chart 实例的数据:', {
          type: 'line',
          data: chartData,
          options: {
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                  y: {
                      beginAtZero: false,
                      grid: { color: 'rgba(255, 255, 255, 0.1)' },
                      ticks: { color: '#ffffff' }
                  },
                  x: {
                      grid: { color: 'rgba(255, 255, 255, 0.1)' },
                      ticks: { color: '#ffffff' }
                  }
              },
              plugins: {
                  legend: { labels: { color: '#ffffff' } }
              }
          }
      });
    }
    catch (error) {
      console.error('图表渲染失败:', error);
    }
}

const formatChartDate = (dateString) => {
  const date = new Date(dateString);
  if (isNaN(date.getTime())) {
    return '无效日期';
  }
  return `${date.getMonth() + 1}/${date.getDate()}`;
}

// 健身小贴士
const fitnessTips = ref([
  '保持规律锻炼，每周至少3次，每次30分钟以上',
  '锻炼前进行5-10分钟热身，减少运动损伤风险',
  '运动后补充蛋白质和水分，帮助肌肉恢复',
  '结合有氧和无氧运动，全面提升身体素质',
]);
</script>

<template>
  <main class="fitness-home">


    <!-- 英雄区域 -->
    <section class="hero">
      <div class="hero-content">
        <h1>塑造更好的自己</h1>
        <p>专业健身课程，科学训练计划，助你达成健身目标</p>

        <button class="btn-primary" @click="router.push('/exercise-library')">开始训练</button>
      </div>
    </section>

    <div class="user-profile" style="color: white; padding: 20px; background: rgba(0,0,0,0.5); border-radius: 8px; margin: 20px auto; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
      <!-- 调试信息 -->
      <p v-if="false">调试: userInfo={{ userInfo }}, fitnessGoalText={{ fitnessGoalText }}</p>
      <p>用户名: {{ userInfo.username || '未登录' }}</p>
      <p>身高: {{ userInfo.height || '未设置' }} cm</p>
      <p>性别: {{ userInfo.gender === 'male' ? '男' : userInfo.gender === 'female' ? '女' : userInfo.gender === 'other' ? '其他' : '未设置' }}</p>
      <p>当前目标: {{ fitnessGoalText }}</p>
    </div>
    <!-- 营养摄入 summary -->
    <section class="nutrition-summary-section">
      <div class="nutrition-summary glass-card">
        <h2 style="color: white;">今日营养摄入</h2>
        <div class="summary-grid">
          <div class="summary-item">
            <span class="summary-label">总热量</span>
            <span class="summary-value">{{ totalCalories }} kcal</span>
            <div class="progress-bar" :style="{ width: caloriesPercentage + '%' }"></div>
            <span class="summary-goal">目标: {{ settingsStore.calorieGoal || 2000 }} kcal</span>
          </div>

          <div class="summary-item">
            <span class="summary-label">蛋白质</span>
            <span class="summary-value">{{ totalProtein }} g</span>
            <div class="progress-bar protein" :style="{ width: proteinPercentage + '%' }"></div>
            <span class="summary-goal">目标: {{ settingsStore.proteinGoal || 100 }} g</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">碳水化合物</span>
            <span class="summary-value">{{ totalCarbs }} g</span>
            <div class="progress-bar carbs" :style="{ width: carbsPercentage + '%' }"></div>
            <span class="summary-goal">目标: {{ settingsStore.carbsGoal || 250 }} g</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">脂肪</span>
            <span class="summary-value">{{ totalFat }} g</span>
            <div class="progress-bar fat" :style="{ width: fatPercentage + '%' }"></div>
            <span class="summary-goal">目标: {{ settingsStore.fatGoal || 70 }} g</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 数据趋势图表 -->
    <section class="body-stats-section">
      <div class="stats-charts glass-card">
        <h2 style="color: white;">身体数据趋势</h2>

        <div class="chart-container">
          <div class="chart-placeholder" v-if="!hasStatsData">
            暂无数据，开始记录你的身体数据吧！
          </div>
          <div class="chart-loading" v-else-if="isLoading">
            加载中...
          </div>
          <div v-else>
            <canvas ref="chartRef"></canvas>
          </div>
        </div>
      </div>
    </section>

    <!-- 课程展示 -->
    <section class="classes-section">
      <div class="container">
        <h2>热门健身课程</h2>
        <div class="desktop-row">
          <a v-for="classItem in fitnessClasses" :key="classItem.id" :href="classItem.videoUrl" class="class-item-link" target="_blank">
          <div class="class-card desktop-col-1-3">
            <img :src="classItem.image" :alt="classItem.title" class="class-image">
            <div class="class-info">
              <h3>{{ classItem.title }}</h3>
              <p><strong>教练:</strong> {{ classItem.instructor }}</p>
              <p><strong>时长:</strong> {{ classItem.duration }}</p>
              <p><strong>难度:</strong> {{ classItem.level }}</p>
              <p class="class-description">{{ classItem.description }}</p>
              <!-- 按钮已移除，整个卡片区域可点击 -->
            </div>
          </div>
                  </a>
        </div>
      </div>
    </section>

    <!-- 健身小贴士 -->
    <section class="tips-section">
      <div class="container">
        <h2 >健身小贴士</h2>
        <ul class="tips-list">
          <li v-for="(tip, index) in fitnessTips" :key="index">{{ tip }}</li>
        </ul>
      </div>
    </section>
  </main>
</template>

<style lang="scss" scoped>
@use 'sass:list';
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

$shadow-size: 15vh;
$shadow-offset: $shadow-size * 1.5;
$shadow-colors: #6200ea, #bb86fc, #03dac6, #03a9f4, #4caf50, #ff9800, #f44336, #9c27b0, #2196f3, #00bcd4, #607d8b, #795548, #3f51b5, #8bc34a, #ffc107, #e91e63, #009688;
$colors-max: list.length($shadow-colors);
$shadows-steps: 4;
$colors-in-step: round($colors-max/$shadows-steps);
$title-text-color: #f5f5f5;
$title-bg-color: #121212;
$matrix-h: 30;
$matrix-v: 20;

@function get_color($position) {
  $color: list.nth($shadow-colors, 1);
  @if ($position < $colors-max) {
    $color: list.nth($shadow-colors, $position);
  } @else {
    $fixed-position: $position % $colors-max + 1;
    $color: list.nth($shadow-colors, $fixed-position);
  }
  @return $color;
}

@function shadow-matrix($color-offset: 0) {
  $out: null;
  $cell-counter: 1;
  @for $cell_column from 1 through $matrix-v {
    $step-v: ($cell_column - 1) * $shadow-offset;
    @for $cell_row from 1 through $matrix-h {
      $color: get_color($cell-counter + $color-offset);
      $step-h: ($cell_row - 1) * $shadow-offset;
      $out: list.append($out, $step-h $step-v $shadow-size $shadow-size $color, comma);
      $cell-counter: $cell-counter + 1;
    }
  }
  @return $out;
}@keyframes shadows-cells {
  25% { box-shadow: shadow-matrix($colors-in-step*2); }
  45% { box-shadow: shadow-matrix($colors-in-step); }
  75% { box-shadow: shadow-matrix($colors-in-step*3); }
}


.main-nav {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

.main-nav a {
  color: var(--gray-700);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-normal);
}

.main-nav a:hover,
.main-nav a.router-link-exact-active {
  color: var(--primary);
  background-color: rgba(0, 206, 201, 0.1);
}


.fitness-home {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2vh 4vw;
  overflow-y: auto;
  z-index: 10;

  @media (max-width: 768px) {
    padding: 2vh 2vw;
    min-height: calc(100vh - env(safe-area-inset-top) - 60px);
  }

  .hero {

    margin-top: 60px;
  }
}
.hero {
  min-height: 70vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-align: center;
  padding: var(--spacing-xl);
  animation: fadeIn var(--transition-slow);
}

.hero-content h1 {
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  margin-bottom: 1.2rem;
  line-height: 1.3;
  @media (max-width: 768px) {
    font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  }
}

/* 营养摄入summary样式 */
.nutrition-summary-section {
  padding: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.nutrition-summary {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.summary-item {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background-color: var(--gray-50);
}

.summary-label {
  display: block;
  font-size: var(--font-size-sm);
  color: #e0e0e0;
  margin-bottom: 4px;
}

.summary-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: #ffffff;
}

.progress-bar {
  height: 8px;
  background-color: #424242;
  border-radius: 4px;
  margin: 8px 0;
  overflow: hidden;
  background: linear-gradient(to right, #6200ea 0%, #bb86fc 100%);
}

.progress-bar.protein {
  background: linear-gradient(to right, #03dac6 0%, #00bfa5 100%);
}

.progress-bar.carbs {
  background: linear-gradient(to right, #3700b3 0%, #6200ea 100%);
}

.progress-bar.fat {
  background: linear-gradient(to right, #ff6d00 0%, #ff9100 100%);
}

.summary-goal {
  font-size: var(--font-size-xs);
  color: #bdbdbd;
}

.hero-content p {
  font-size: clamp(1.1rem, 3.8vw, 1.6rem);
  line-height: 1.5;
  margin: 0 auto 1.8rem;
  max-width: 32ch;
  @media (max-width: 768px) {
    font-size: clamp(0.95rem, 4vw, 1.4rem);
  }
}

.container {
  max-width: 100%;
  margin: 2rem auto; // 减小上下边距
  padding: 2rem;
}

.classes-section {
  h2 { color: white; }
  .class-info h3, .class-info p { color: white; }
  padding: 2rem 0; // 减小上下内边距
}

.classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

/* 桌面端布局 */
@media (min-width: 768px) {
  .hero-content h1 {
    font-size: 3rem; 
  }

  .hero-content p {
    font-size: 3rem; 
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .tips-section {
  .container {
    h2 {
          color: rgba(255,255,255,0.95);
      @media (max-width: 768px) {
        color: #fff;

        font-size: clamp(1.4rem, 5vw, 1.8rem);
      }
    }
    
    .tips-list li {
      color: rgba(255,255,255,0.95);
      @media (hover: none) and (pointer: coarse) {
        font-size: 0.95rem;
        line-height: 1.6;
      }
    }
  }
  padding: var(--spacing-3xl) 0;
}

  .tips-list {
    columns: 2;
    gap: var(--spacing-xl);
    
  }
}

.class-item-link {
  display: block;
  text-decoration: none;
}

.desktop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 2vw;
    padding: 2vw;
    .class-card {
      flex: 1 1 100%;
      min-width: auto;
      max-width: 96vw;
    }
  }
}

.class-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  background: rgba(66, 66, 66, 0.25);
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 400px;
  max-width: 500px;  /* 添加最大宽度限制 */
  height: 450px;    /* 添加固定高度 */
  display: flex;
  flex-direction: column;
}

.class-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.class-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.class-info {
  padding: 1.5rem;
}

.tips-section {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  padding: var(--spacing-xxl) 0;
  margin-top: var(--spacing-xxl);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.tips-list {
  list-style-type: none;
  margin-top: 2rem;
}

.tips-list li {
  font-size: 0.85rem;
  margin-bottom: 1rem;
  position: relative;
  padding-left: 1.5rem;
  word-wrap: break-word;
  padding: 0.5rem;
}

.tips-list li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #4CAF50;
  font-weight: bold;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--white);
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: var(--success);
  color: var(--white);
  border: none;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  margin-top: var(--spacing-md);
}

.btn-secondary:hover {
  background-color: var(--success-dark);
  transform: translateY(-2px);
}
.chart-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.chart-controls button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  background-color: rgba(66, 66, 66, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  color: #f5f5f5;
}

.chart-controls button.active {
  background-color: #03dac6;
  color: #121212;
}

.chart-container {
  height: 200px;
  position: relative;
  background-color: rgba(66, 66, 66, 0.3);
  border-radius: 8px;
}

.chart-placeholder,
.chart-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}


@media (max-width: 480px), (hover: none) and (pointer: coarse) {
  /* 同时匹配触屏设备和窄屏设备 */
  /* 覆盖主流手机尺寸 (iPhone 14: 390px, 安卓主流: 360-412px) */
  @media (max-width: 400px) {
  /* 移动端专属优化 */
  .user-profile {
    padding: 2.13vw 4.27vw;
    gap: 2.13vw;
    margin: 4.27vw auto;
    border-radius: 2.13vw;
  }

  .body-stats-section .chart-container {
    height: 58.67vw;
    min-height: 50vh; /* 使用视口高度单位保障操作空间 */
    margin-top: 5.33vw;
  }

  .classes-section .desktop-row {
    gap: 2.13vw;
    padding: 4.27vw;
  }

  .class-card {
    min-width: 96vw;
    max-width: 96vw;
    height: auto;
    margin-bottom: 5.33vw;
    border-radius: 5.33vw;
  }

  .class-info {
    padding: 4.27vw;
  }

  .class-info h3 {
    font-size: 4.27vw;
    margin-bottom: 2.13vw;
  }

  .btn-primary {
    padding: 2.13vw 5.33vw;
    font-size: 3.73vw;
    border-radius: 2.67vw;
  }

  /* 保持原有桌面端样式 */
  .nutrition-summary .summary-grid {
    grid-template-columns: 1fr;
  }
  .glass-card {
    padding: 1rem;
  }
  * {
    box-sizing: border-box;
  }
}
}
</style>
